<template>
    <el-container class="login">
    <!-- src="../../../static/img/login/saoma2.png"   水利局图片 -->
    <el-header height="70px" class="login-header">
      <img src="../../../../static/img/login/loginheader.png">
    </el-header>
    <el-main class="login-body">
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        class="form"
        autocomplete="on"
        label-position="left"
        @keyup.enter.native="dataFormSubmit()"
      >
        <p>账户登录</p>
        <el-form-item class="input" prop="userName">
          <el-input
            ref="username"
            v-model="dataForm.userName"
            placeholder="帐号"
            name="userName"
            type="text"
            tabindex="1"
            autocomplete="on"
          >
            <i slot="prefix" class="iconfont iconyonghu1" />
          </el-input>
        </el-form-item>

        <el-form-item class="input" prop="password">
          <el-input
            :key="passwordType"
            ref="password"
            v-model="dataForm.password"
            show-password
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            autocomplete="on"
          >
            <i slot="prefix" class="iconfont iconmima" />
          </el-input>
        </el-form-item>

        <el-form-item class="input" prop="password2" v-if="submitType !== 'login'">
          <el-input
            :key="passwordType"
            ref="password"
            v-model="dataForm.password2"
            show-password
            :type="passwordType"
            placeholder="密码确认"
            name="password"
            tabindex="2"
            autocomplete="on"
          >
            <i slot="prefix" class="iconfont iconmima" />
          </el-input>
        </el-form-item>
        <el-form-item class="input " prop="captcha" v-if="submitType === 'login'">
          <div class="validateImg">
            <el-input
              ref="code"
              v-model="dataForm.captcha"
              placeholder="请输入验证码"
              autocomplete="off"
              name="captcha"
              type="text"
            >
              <i slot="prefix" class="iconfont iconmima" />
            </el-input>
              <!-- v-show="captchaPath" -->
            <img
              :src="captchaPath"
              alt="codeImage"
              class="login-input"
              style="width: 100%; height: 36px; margin-left: 10px;"
              @click="getCaptcha()"
            >
          </div>

        </el-form-item>
        <el-button
          type="primary"
          round
          @click.native.prevent="dataFormSubmit()"
        >{{ submitType === 'login' ? '登陆' : '注册' }}</el-button>
      </el-form>
      <!-- <div style="margin: 20px; text-align: center;">
        <el-button type="text" size="small" v-if="submitType === 'login'" @click="submitType = 'register'">还没有账号？立即注册</el-button>
        <el-button type="text" size="small" v-if="submitType !== 'login'" @click="submitType = 'login'">已有账号，开始登陆</el-button>
      </div> -->
      <!-- <div class="auth-msg">—————&nbsp;&nbsp;©青岛天人环境股份有限公司&nbsp;&nbsp;—————</div> -->
    </el-main>

    <!-- <el-dialog
      title="APP下载"
      :visible.sync="dialogVisible"
      width="360px"
      :before-close="handleClose"
    >
      <img
        style="width: 260px; height: 260px"
        src="http://222.173.70.50:19000/trsy/qrcode.png"
        title="APP下载"
        alt="APP下载"
      >
    </el-dialog> -->

  </el-container>
</template>

<script>
import MoveStars from './components/move-stars.vue'
import FlashStars from './components/flash-stars.vue'
import { getUUID } from '@/utils'
// import Vue from 'vue'
export default {
  components: { MoveStars, FlashStars },
  data () {
    return {
      passwordType: 'password',
      enTitle: 'There are no words that can\'t be remembered, only those who have not registered word busters.',
      submitType: 'login',
      captchaPath: '',
      dataForm: {
        userName: 'admin001', // admin001
        password: 'admin001',
        password2: '',
        uuid: '',
        captcha: ''
      },
      dataRule: {
        userName: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
        password: [ { required: true, message: '密码不能为空', trigger: 'blur' }],
        password2: [ { required: true, message: '密码确认不能为空', trigger: 'blur' }],
        captcha: [ { required: true, message: '验证码不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    submitType (val) {
      this.getCaptcha()
    }
  },
  created () {
    this.getCaptcha();
  },
  mounted() {
    // if (!Vue.cookie.get('token')) {
    //   this.dataFormSubmit();
    // }

    this.login();
  },
  methods: {
    // 提交表单
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.submitType === 'login' ? this.login() : this.register()
        }
      })
    },
    login () {
      this.$http({
        url: this.$http.adornUrl('/sys/login'),
        method: 'post',
        data: this.$http.adornData({
          'username': this.dataForm.userName,
          'password': this.dataForm.password,
          'uuid': this.dataForm.uuid,
          'captcha': this.dataForm.captcha
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$cookie.set('token', data.token)
          this.$router.replace({ name: 'carMap' })
        } else {
          this.getCaptcha()
          this.$message.error(data.msg)
        }
      })
    },
    register () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/register'),
        method: 'post',
        data: this.$http.adornData({
          'username': this.dataForm.userName,
          'password': this.dataForm.password
        })
      }).then(({data}) => {
        this.$refs['dataForm'].resetFields()
        this.getCaptcha()
        if (data && data.code === 0) {
          this.submitType = 'login'
          this.$message.success('注册成功')
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 获取验证码
    getCaptcha () {
      this.dataForm.uuid = getUUID()
      this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-wrapper {
  height: 100%;
  width: 100%;
  background-image: url(~@/assets/img/login/login_bg.jpg);
  background-size: 100% 100%;
  .sys-title {
    position: absolute;
    top: 20px;
    left: 10px;
    display: flex;
    .title {
      color: #fff;
      .cn {
        font-size: 36px;
        font-family: '楷体'; // FZZhengHeiS-EB-GB;
        font-weight: 400;
        line-height: 50px;
        margin-top: 20px;
      }
      .en {
        font-size: 16px;
        font-family: Microsoft YaHei;
        line-height: 30px;
        opacity: .6;
      }
    }
  }
}
.login-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 30px;
  width: 400px;
  height: 440px;
  background: rgba(19, 57, 109, 0.7);
  border: 1px solid #206FC9;
  opacity: 0.8;
  border-radius: 6px;
  overflow: hidden;
  .head-light {
    width: 100%;
    position: absolute;
    left: 0%;
    top: -4px;
    opacity: 1;
  }
  .login-box {
    .login-title {
      font-size: 24px;
      font-family: '楷体';
      color: #fff;
      margin: 0;
      line-height: 60px;
    }
    .forget-btn {
      color: #888;
      text-align: right;
      margin-top: -10px;
    }
    .submit-btn {
      margin-top: 25px;
      width: 100%;
      height: 46px;
      background: linear-gradient(0deg, #1A33B2, #23BDBD);
      border-radius: 4px;
      border: 1px solid #206FC9;
    }
    height: 100%;
    width: 100%;
    // transform-origin: 50% 0%;
    animation: loginPullDown 1.1s ease-out;
  }
  @keyframes loginPullDown {
  	0% {
  		transform: scaleY(0.1);
  	}
  	40% {
  		transform: scaleY(1.02);
  	}
  	60% {
  		transform: scaleY(0.98);
  	}
  	// 80% {
  	// 	transform: scaleY(1.01);
  	// }
  	// 100% {
  	// 	transform: scaleY(0.98);
  	// }
  	80% {
  		transform: scaleY(1.01);
  	}
  	100% {
  		transform: scaleY(1);
  	}
  }
}
</style>

<style lang="scss">
html, body {
  height: 100%;
  width: 100%;
}

.login-box {
  .login-input {
    .el-input__inner {
      height: 42px;
      font-size: 15px;
      color: #fff;
      background: rgba(16, 58, 119, 0.6);
      border: 1px solid #224C89;
    }
    // .el-input__suffix-inner {
    //   background: linear-gradient(0deg,#1A71BA, #92D5FF);
    // }
  }
}


// 背景样式
.login {
  height: 100%;
  overflow: hidden;
  background: rgba(245, 245, 245, 1);
  position: relative;
  .saoma {
    position: absolute;
    z-index: 999;
    top: 10px;
    right: 20px;
  }
}
// 头部header
.login-header {
  background: #fff;
}
.login-header > img {
  position: absolute;
  left: 135px;
  top: 15px;
}

// 主题样式
.login-body {
  height: 100%;
  background: url("../../../../static/img/login/loginback.png") no-repeat;
  background-size: 100%;
}

// 登录表单的内容
.form {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 360px;
  height: 420px;
  background: #fff;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  text-align: center;
}
// 顶部标题
.form > p {
  font-size: 24px;
  color: #333333;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 60px;
  margin: 5% auto;
  text-align: center;
}

.input {
  width: 80%;
  margin: 5% auto;
  position: relative;
  border-bottom: solid 2px #4f93fe;
  margin-bottom: 38px;
  line-height: 40px;
}

.input {
  ::v-deep input {
    border-bottom: 0;
    border: none;
    outline: none;
  }
  // ::v-deep div:first{
  //   line-height: 33px !important;
  // }
}

.form > button {
  margin-top: 10px;
  width: 240px;
}

// 下方说明
.login-body > .auth-msg {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0;
  font-size: 13px;
  color: #252b3a;
  font-weight: 300;
  line-height: 90px;
  font-family: PingFang SC;
}
.iconfont {
  width: 30px;
  height: 30px;
  color: #167fff;
}
.validateImg{
    display: flex;
}
.el-form-item__content{
  line-height: 33px !important;
}
</style>
